{eq name="Request.action" value="edit"}
{Data:article id="request" var="vo"}
{else /}
{/eq}
<style>
	body .layui-form-item .layui-input-block {min-width: 200px;}
	body .layui-select-title .layui-input {max-width: 200px;}
	.selectCom{position:absolute;right:0;top:0;}
    .attachs:after{content:' ';clear: both;}
    .attach{width:210px;height:335px;display:inline-block;margin:0 10px 10px 0;position:relative;}
    .attach .layui-progress{display:none;}
    .attach img{max-width:210px;max-height:297px;}
    .attach .img{width:210px;height:297px;background:#ddd;position: relative;overflow: hidden;}
    .attach .img p {position: absolute;top: 50%;left: 50%;margin: 0;padding: 0;}
    .attach .img img {position: absolute;top: -50%;left: -50%;display: block;}
    .attach .img img.hidden {visibility: hidden;position: static;}
    .attach .img .webuploader-pick{width:100%;height:100%;background:transparent;padding:0;}
    .attach .img .webuploader-pick:after{content:'\e681';font-family: layui-icon!important;line-height: 297px;font-size: 48px;}
    .attach .remove{position:absolute;top: 0;right: 0;display:none;background: #fff;border-radius: 50%;width: 26px;height: 26px;padding: 2px;}
    .attach .remove:after{content: '\1006';font-family: layui-icon!important;font-size: 26px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
    .active{background:#ccc;}
    /* 两列右侧自适应布局 */
	.g-bd1{margin:0 0 10px;}
	.g-sd1{position:relative;float:left;width:200px;margin-right:-200px;}
	.g-mn1{float:right;width:100%;}
	.g-mn1c{margin-left:210px;}
	#dragContainer{min-height: 400px;border:2px solid #e6e6e6;box-sizing:border-box;padding: 10px;}
	#dragContainer.webuploader-dnd-over{border:2px dashed #999999;}
</style>
<form action="__APP__/{$Request.controller}/update.html" class="child-form page-list-form layui-form layui-form-pane" method="post">
	<div class="layui-tab layui-tab-brief">
		<ul class="layui-tab-title">
			<li lay-id="Base" class="layui-this">客户基本信息</li>
			{eq name="Request.action" value="edit"}
			<li lay-id="Attach">附件信息</li>
			<li lay-id="Lirun">利润表</li>
			{/eq}
		</ul>
		<div class="layui-tab-content page-tab-content">
			<div class="layui-tab-item layui-show" id="Base">
				
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">录入时间：</label>
						<div class="layui-input-block">
							<INPUT TYPE="text" class="layui-input date" id="date" name="date" value="{$vo.date|default=date('Y-m-d')}" lay-verify="required|date"/>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">进度：</label>
						<div class="layui-input-block">{Html:select name="step" options=":LinkageList('BorrowStep')" selected="$vo['step']" class="Require" lay-verify="required"/}</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">付款日期：</label>
						<div class="layui-input-block"><INPUT TYPE="text" class="layui-input date" id="loan_time" name="loan_time" value="{$vo.loan_time}" lay-verify="date" ></div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">结清日期：</label>
						<div class="layui-input-block"><INPUT TYPE="text" class="layui-input date" id="end_time" name="end_time" value="{$vo.end_time}" ></div>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">申请金额：</label>
						<div class="layui-input-block"><INPUT TYPE="text" class="layui-input" name="money" value="{$vo.money}" lay-verify="money"></div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">贷款期限：</label>
						<div class="layui-input-block"><INPUT TYPE="text" class="layui-input" name="peroid" value="{$vo.peroid}" lay-verify="n1-2" ></div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">计息方式：</label>
						<div class="layui-input-block">
							<INPUT TYPE="text" class="layui-input" name="extra[jxfs]" value="{$vo.extra.jxfs}" lay-verify="required"/>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">放款金额：</label>
						<div class="layui-input-block"><INPUT TYPE="text" class="layui-input" name="final_money" value="{$vo.final_money}" lay-verify="money" /></div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">  申请人：</label>
						<div class="layui-input-block">
							<INPUT TYPE="text" name="realname" value="{$vo.realname}" class="layui-input" lay-verify="required|realname"/>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">身份证号：</label>
						<div class="layui-input-block">
							<INPUT TYPE="text" name="extra[idcard]" value="{$vo.extra.idcard}" class="layui-input" lay-verify='required'/>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">联系手机：</label>
						<div class="layui-input-block"><INPUT TYPE="text" class="layui-input" name="extra[phone]" value="{$vo.extra.phone}" lay-verify='m'></div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">联系人一：</label>
						<div class="layui-input-block"><INPUT TYPE="text" class="layui-input" name="extra[sos_name1]" lay-verify='z2-4' value="{$vo.extra.sos_name1}"></div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">性别：</label>
						<div class="layui-input-block">{Html:select name="extra[sos_sex1]" options=":LinkageList('Sex')" selected="$vo['extra']['sos_sex1']" class="Require" lay-verify='*'/}</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">关系：</label>
						<div class="layui-input-block">
							<INPUT TYPE="text" class="layui-input" name="extra[sos_rela1]" value="{$vo.extra.sos_rela1}" lay-verify='*' list="sos_rela1" />
							<datalist id="sos_rela1">
								<option value="父亲">
								<option value="母亲">
								<option value="哥哥">
								<option value="弟弟">
								<option value="姐姐">
								<option value="妹妹">
								<option value="儿子">
								<option value="女儿">
							</datalist>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">联系手机：</label>
						<div class="layui-input-block"><INPUT TYPE="text" class="layui-input" name="extra[sos_phone1]" value="{$vo.extra.sos_phone1}" lay-verify='m'></div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">联系人二：</label>
						<div class="layui-input-block"><INPUT TYPE="text" class="layui-input" name="extra[sos_name2]" value="{$vo.extra.sos_name2}" lay-verify='z2-4'></div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">性别：</label>
						<div class="layui-input-block">{Html:select name="extra[sos_sex2]" options=":LinkageList('Sex')" selected="$vo['extra']['sos_sex2']" class="Require" lay-verify='*'/}</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">关系：</label>
						<div class="layui-input-block">
							<INPUT TYPE="text" class="Require layui-input" name="extra[sos_rela2]" value="{$vo.extra.sos_rela2}" lay-verify='*' list="sos_rela2"/>
							<datalist id="sos_rela2">
								<option value="朋友">
								<option value="同学">
								<option value="同事">
							</datalist>
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">联系手机：</label>
						<div class="layui-input-block"><INPUT TYPE="text" class="Require layui-input" name="extra[sos_phone2]" value="{$vo.extra.sos_phone2}" lay-verify='m'></div>
					</div>
				</div>
				<div class="layui-row layui-col-space10">
					<div class="layui-inline">
						<label class="layui-form-label">提醒日期：</label>
						<div class="layui-input-block">
							<INPUT TYPE="text" class="Require layui-input date" name="remind_time" id="remind_time" value="{$vo.remind_time}">
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">车辆信息：</label>
						<div class="layui-input-block">
							<INPUT TYPE="text" class="Require layui-input" name="extra[car_info]" value="{$vo.extra.car_info}" lay-verify='required'>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-col-md6 layui-col-sm6 layui-col-lg3">								
						<div class="layui-form-item layui-form-text">
							<label class="layui-form-label">GPS编号：</label>
							<div class="layui-input-block">
								<textarea name="gps" cols="100" rows="3" class="layui-textarea">{$vo.gps|default=[]|implode="\\n"}</textarea>
							</div>
						</div>
					</div>
					<div class="layui-col-md6 layui-col-sm6 layui-col-lg3">
						<div class="layui-form-item layui-form-text">
							<label class="layui-form-label">借款说明：</label>
							<div class="layui-input-block">
								<textarea name="remark" cols="100" rows="3" class="layui-textarea">{$vo.remark}</textarea>
							</div>
						</div>
					</div>
				</div>
			</div>
			{eq name="Request.action" value="edit"}
			<div class="layui-tab-item" id="Attach">				
			    <div class="g-bd1 f-cb">
			        <div class="g-sd1">
			            <ul id="tree" class="layui-box layui-tree">
			                <li>
			                    <a href="javascript:;" class="active"><i class="layui-icon layui-icon-home"></i><cite>全部资料</cite></a>
			                    <ul class="layui-show">
			                        <li>
			                            <a href="javascript:;" class="mulu"><i class="layui-icon layui-icon-template-1"></i><cite>查询征信资料</cite></a>
			                            <ul class="layui-show">
			                                <li><a href="javascript:;"><i class="layui-icon layui-icon-file"></i><cite>银行征信</cite></a></li>
			                                <li><a href="javascript:;"><i class="layui-icon layui-icon-file"></i><cite>鹏元征信</cite></a></li>
			                                <li><a href="javascript:;"><i class="layui-icon layui-icon-file"></i><cite>手持照片</cite></a></li>
			                                <li><a href="javascript:;"><i class="layui-icon layui-icon-file"></i><cite>身份证复印件</cite></a></li>
			                            </ul>
			                        </li>
			                        <li>
			                            <a href="javascript:;" class="mulu"><i class="layui-icon layui-icon-template-1"></i><cite>放款资料</cite></a>
			                            <ul class="layui-show">
			                                <li><a href="javascript:;"><i class="layui-icon layui-icon-file"></i><cite>登记证书</cite></a></li>
			                            </ul>
			                        </li>
			                        <li><a href="javascript:;"><i class="layui-icon layui-icon-file"></i><cite>其他资料</cite></a></li>
			                    </ul>
			                </li>
			            </ul>
			        </div>
			        <div class="g-mn1">
			            <div class="g-mn1c" id="dragContainer">
			            </div>
			        </div>
			    </div>
			</div>
			<textarea style="display:none;" name="attachs" id="attachs">{$vo.attachs}</textarea>
				    	
			<div class="layui-tab-item" id="Lirun">				
				<table class="layui-table" lay-filter="demo">
				    <colgroup>
				        <col width="60">
				        <col width="120">
				        <col>
				    </colgroup>
				    <thead>
				    <tr>
				        <th>序号</th>
				        <th>日期</th>
				        <th>金额</th>
				        <th>操作</th>
				    </tr> 
				    </thead>
				    <tbody>
				        {data:loop name="Profit" pid="1" module="Loan" limit="all" order="date asc" var="pvo"}
				        <tr>
				            <td>{$key+1}</td>
				            <td>{$pvo.date|date='Y-m-d'}</td>
				            <td>{$pvo.money}</td>
				            <td>
    							<div class="layui-btn-group">
    								<a data-href="__APP__/Profit/edit/id/{$pvo.id}.html" data-button="true" class="layui-btn layui-btn-primary layui-btn-sm popen" title="编辑"><i class="layui-icon layui-icon-edit"></i></a>
    								<a href="__APP__/Profit/del/id/{$pvo.id}.html" class="layui-btn layui-btn-primary layui-btn-sm" title="删除"><i class="layui-icon layui-icon-close"></i></a>
    							</div>
    						</td>
				        </tr>
				        {/data:loop}
				    </tbody>
				</table>
			</div>
			{/eq}
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit="" lay-filter="formSubmit">提交</button>
				</div>
			</div>
			<input type="hidden" name="id" value="{$vo.id}" />
		</div>
	</div>
</form>
<script>
	layui.use(['jquery','form', 'layedit', 'laydate','element','suggest','tree'], function(){
		var form = layui.form,
			layer = layui.layer,
			$ = layui.jquery,
			layedit = layui.layedit,
			laydate = layui.laydate,
			element = layui.element,
			suggest = layui.suggest,
			showofhide = function(value){
				if(value=='2'){
					$('#PeiOuInfo').show();
				}else{    		
					$('#PeiOuInfo').hide();
				}  				
			};
		var n= 0;
        window.$=window.jQuery=$;
		laydate.render({
			elem: '#date'
		});
		laydate.render({
			elem: '#loan_time'
		});
		laydate.render({
			elem: '#end_time'
		});
		laydate.render({
			elem: '#remind_time'
		});
		{eq name="Request.action" value="edit"}		
		var maodian = window.location.href.split('#')[1];
		try{
			$('li[lay-id='+maodian+']').trigger('click');
		}catch(e){}
    	var LoanId= '{$vo.id}';
   		var attachsData = $.parseJSON($('#attachs').val() || null)
   			uploader=null,
   			curClass='全部资料';
   		attachsData = attachsData ? attachsData : {};
   		window.attachsData = attachsData;
	    function initupload(){        
	        uploader = WebUploader.create({
	            dnd :'#dragContainer',
	            disableGlobalDnd : true,
	            swf: 'https://cdn.staticfile.org/webuploader/0.1.5/Uploader.swf',
	            server: ADMIN_PATH +'/Attach/upload.html',
	            paste:document.body,
	            accept:{
	                title:'图片文件',
	                extensions:'gif,jpg,jpeg,bmp,png',
	                mimeTypes:'image/*',
	            },
	            formData :{_ajax:1,savepath:'/Uploads/danbao/'+LoanId+'/'},
	            auto:true,
	            compress:{
	                width: 1500,
	                //height: 1600,
	                // 图片质量，只有type为`image/jpeg`的时候才有效。
	                quality: 90,
	                // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
	                allowMagnify: false,
	                // 是否允许裁剪。
	                crop: false,
	                // 是否保留头部meta信息。
	                preserveHeaders: true,
	                // 如果发现压缩后文件大小比原来还大，则使用原来图片
	                // 此属性可能会影响图片自动纠正功能
	                noCompressIfLarger: true,
	                // 单位字节，如果图片大小小于此值，不会采用压缩。
	                compressSize: 1024
	            },
	            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
	            resize: false
	        });
	        uploader.on( 'fileQueued', function( file ) {
	            var li = $(['<div class="attach" id="'+file.id+'" data-key="'+$('.active').text()+'">'+
	                    '<div class="img"><p><img src="" /><img src="" class="hidden"/></p></div>'+
	                    '<div class="layui-progress" lay-filter="pi"><div class="layui-progress-bar" lay-percent="10%"></div></div>'+
	                    '<a class="remove" href="javascript:;"></a>'+
	                '</div>'].join(''));
	            li.appendTo($('#dragContainer'));
	            if(file.type.substring(0,5)=='image'){
	                uploader.makeThumb( file, function( error, src ) {
	                    if ( error ) {
	                        console.info('不能预览');
	                        return;
	                    }
	                    li.find('img').attr( 'src', src );
	                }, 210, 297);                           
	            }
	        }).on('beforeFileQueued',function(file){
	        	if(curClass=='全部资料'){	        		
					layer.alert('请先选择分类！！');   
	        		return false;
	        	}
	        }).on( 'uploadProgress', function( file, percentage ) {
	            var p = $('#'+file.id).find('.layui-progress');
	            p.show();
	            layui.element.progress(p.attr('lay-filter'), percentage * 100 + '%');
	        }).on('uploadSuccess', function(file,data) {
	            var data=$.parseJSON(data['_raw']);
	            $('#'+file.id).addClass('show');
	            $('#'+file.id).find('img').attr('src',data.savepath +data.savename);
	            $('#'+file.id).find('img:eq(0)').attr('layer-src',data.savepath +data.savename);
	            $('#'+file.id).find('.layui-progress').hide();
	            if(!attachsData[$('.active').text()]){
	            	attachsData[$('.active').text()] = [];
	            }
	            if(!attachsData[curClass]){
	            	attachsData[curClass] = [];
	            }
	            attachsData[curClass].push(data.savename);
	            $('#attachs').val(JSON.stringify(attachsData));
	        });
	    }
	    function showFile(key){
	    	if(attachsData[key]){
	        	var l = attachsData[key];
		        for (var i = 0; i < l.length; i++) {
		            $('#dragContainer').append(['<div class="attach show" data-key="'+key+'">',
		                    '<div class="img"><p><img layer-src="/Uploads/danbao/'+LoanId+'/'+l[i]+'" src="/Uploads/danbao/'+LoanId+'/'+l[i]+'" /><img src="/Uploads/danbao/'+LoanId+'/'+l[i]+'" class="hidden"/></p></div>',
		                    '<div class="layui-progress" lay-filter="pi"><div class="layui-progress-bar" lay-percent="10%"></div></div>',
	                    '<a class="remove" href="javascript:;"></a>',
		                '</div>'].join(''));
		        }
	        }
	    }
        $('#tree a').click(function(){
            var text = $(this).text();
            var list = [];
            if(uploader.isInProgress()){
            	alert('文件上传中，不能切换分类！');
            	return false;
            }
            if(text=='全部资料'){
                curClass = text;
                $('.attach.show').remove();
                for (var i in attachsData) {
                    showFile(i);
                }
                $('.active').removeClass('active');
                $(this).addClass('active');
            }else{
                if(!$(this).hasClass('mulu')){
                    $('.attach.show').remove();
                    showFile(text);
                	curClass = text;
	                $('.active').removeClass('active');
	                $(this).addClass('active');
                }else{
                	alert('目录不可用！');
                }
            }
        });
        $('#dragContainer').on('click','.attach.show .img',function(){
        	var index = $('#dragContainer .attach.show .img').index($(this));
        	console.info(index);
        	var data = [];
        	$('#dragContainer .attach.show .img').each(function(k,v){
        		data.push({
				      "alt": "",
				      "pid": k, //图片id
				      "src": $(v).find('img:eq(0)').attr('src'), //原图地址
				      "thumb": $(v).find('img:eq(0)').attr('src') //缩略图地址        			
        		});
        	});
        	layer.photos({
			    photos: {
				  "title": "", //相册标题
				  "id": 1, //相册id
				  "start": index<0 ? 0 : index, //初始显示的图片序号，默认0
				  "data": data
				}
			    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
			});
        })
        $('#dragContainer').on('mouseenter','.attach',function(){
        	$(this).find('.remove').show();
        }).on('mouseleave','.attach',function(){
        	$(this).find('.remove').hide();
        }).on('click','.attach .remove',function(){
        	var parent = $(this).parent(),
        		src= parent.find('img:eq(0)').attr('src').replace('/Uploads/danbao/{$vo.id}/',''),
        		key= parent.attr('data-key'),
        		newdata=[],
        		olddata = attachsData[key];
        	for(var k in olddata){
        		if(olddata[k]!=src){
        			newdata.push(olddata[k]);
        		}
        	}
        	attachsData[key] = newdata;
        	parent.remove();
	        $('#attachs').val(JSON.stringify(attachsData));
        });
        if(typeof WebUploader == 'undefined'){
            $.getScript('https://cdn.staticfile.org/webuploader/0.1.5/webuploader.html5only.min.js',function(){
                //initData();
                initupload();
        		$('.active').trigger('click');
            });
        }
        {/eq}
	});
</script>